<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理系统</title>
	<link rel="stylesheet" href="../static/easyui/themes/bootstrap/easyui.css">
	<link rel="stylesheet" href="../static/easyui/themes/icon.css">
	<link rel="stylesheet" href="../static/custom.css">
	<script type="text/javascript" src="../static/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../static/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../static/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../static/custom.js"></script>
	<style type="text/css">
		body {
		padding: 0;
		margin: 0;
		background: #eee;
	}
		.middle{
		display: table-cell;
		vertical-align: middle;	
		color: #ddd;
	}
	</style>
	<script type="text/javascript">
	function showTab(container, title, src) {
		var tabContainer = $(container);
		if (tabContainer.tabs('exists', title)) {
			var tab = tabContainer.tabs('getTab', title); // 获取选中的选项卡
			var currentTab = tabContainer.tabs('getSelected');
			if (tab == currentTab) {
				tab.panel('refresh', src);
			} else {
				tabContainer.tabs('select', title); //将选中的tab设为当前tab
			}
		} else {
			tabContainer.tabs('add', {
				'title' : title,
				'href' : src,
				'closable' : true,
				'tools' : [ $.tabs.panel.buttons.refresh ]
			});
		}
	}
		
		$(function(){
			$('#tabContainer').tabs({
				fit:true
			});
			
			$("#menu .easyui-tree").tree({
				onClick : function(node) {
					if (node.text != undefined && node.href != undefined) {
						showTab('#tabContainer', node.title ? node.title : node.text, node.href);
					}
				}
			});
		});
	</script>
</head>
<body class="easyui-layout">   
    <div class="middle"  data-options="region:'north'" style="height:80px;padding-left:30px;padding-right: 10px;background-image:url('static/images/log.jpg')">
    	<span style="font-size: 3.0em; display: inline-block;float: left;">图书管理系统</span>
    	<span style="display: inline-block;float: right;margin-top: 30px;margin-right: 30px;font-size: 1.2em;">欢迎你：张三 &nbsp;<a style="color: #ddd;" href="#">注销</a></span>
    	
    	<!-- <div style="float: right;height: 100%;"><a style="font-size: 1.5em;margin-top: 20px;">注销</a></div> -->
    </div>   
    <!-- <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> -->   
    <div data-options="region:'west',iconCls:'icon-more', title:'主菜单',split:true" style="width:200px;">
		<div id="menu" class="easyui-accordion" fit=true style="width:300px;height:200px;">   
		    <div title="用户管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
				<ul class="easyui-tree">
					<li data-options="href:'student/manage'">学生管理</li>
					<li data-options="href:'teacher/manage'">教师管理</li>
				</ul>
		    </div>   
		    <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">   
		        content2    
		    </div>   
		    <div title="设置" data-options="iconCls:'icon-large-smartart'" >   
		        <ul class="easyui-tree">
		        	<li data-options="href:'banji/manage'">班级管理</li>
		        	<li data-options="href:'dept/manage'">部门管理</li>
		        
		        </ul>    
		    </div>   
		</div>  
    </div>   
    <div class="middle" data-options="region:'south'" style="height:40px;background: #ddd;text-align: center;font-size: 1em;">
    	<span style="color: #666;">版权所有：ljc.tgc.edu © 2018</span>
    </div>   
    <div data-options="region:'center'" >
		<div id="tabContainer" style="padding: 1px;">
			<div title="首页" style="padding: 10px;" data-options="tools:[$.tabs.panel.buttons.refresh]">首页</div>
		</div>
    </div>   
</body>  

</html>